<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .ad{
            position: relative;
            margin:100px auto;
            width: 700px;
            height: 400px;
            background: url('bg.jpg')no-repeat center/100% 100%；
        }
        .ad .close{
            position: absolute;
            top:5px;
            right: 5px;
            width: 30px;
            height:50px;
            border:1px solid red;
            font-size: 32px;
        }
    </style>
</head>
<body>
    <div class="ad">1</div>
    <div class="ad">2</div>
    <div class="ad">3
        <h3 class="close">X</h3>
    </div>
    <script>
        const ad=document.querySelectorAll('.ad');
        const clo=document.querySelector('.close');
        clo.addEventListener('click',function(){
            ad[2].style.display='none';
        },false);
        console.log(clo.parentNode);
        console.log(clo.parentElement);
        console.log('-----------');
        console.log(ad[2].childNodes);
        console.log(ad[2].children);
        console.log('-------');
        console.log(clo.previousElementSibling);
        console.log(clo.nextElementSibling);
    </script>
</body>
</html>